<template>
  <view class="">
    <view class="header">
      <view style="padding: 0 38rpx">
        <view class="title">分类</view>
        <up-input placeholder="搜索内容" border="none" shape="circle" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #A8A8A8"></up-input>
      </view>
    </view>
    <view class="goodsCon">
      <view class="leftList">
        <view v-for="(item, index) in firstGroundArr" :key="index" class="item" @click="firstClick(item)" :style="{ background: leftActive === item.FID ? '#fff' : 'none' }">{{ item.FNAME }}</view>
      </view>
      <view class="rightList">
        <view class="rightTop">
          <u-tabs
            :list="tabList"
            @click="tabClick"
            :activeStyle="{
              color: '#1E1E1E',
              fontWeight: 'bold',
              transform: 'scale(1.02)',
            }"
            key-name="FNAME"
            lineWidth="26"
            lineHeight="4"
            lineColor="#21CCA2"
          ></u-tabs>
        </view>
        <view class="item">
          <HengGoodsItem v-for="(item, index) in goodsList" :key="index" :info="item">
            <!-- <template #start>
              <u-icon name="star-fill" color="#21CCA2" size="22"></u-icon>
            </template> -->
          </HengGoodsItem>
        </view>
      </view>
    </view>
    <view class="bottomBox">
      <view class="left">
        <view class="shopCar">
          <image class="icon" src="../../static/home/shopcar.png" mode="scaleToFill" />
          <view class="badgeBox"><u-badge :value="shopCarValue" type="error"> </u-badge></view>
        </view>
        <view class="price">
          <text class="unit">￥</text>
          <text class="num" style="font-size: 36rpx">123</text>
        </view>
      </view>
      <view class="btn" @click="addBuyCar">加入购物车</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import HengGoodsItem from "../../components/hengGoodsItem.vue";
import { getInfo, queryGroupInfo } from "../../api/home";
import dayjs from "dayjs";
const goodsList = ref<any[]>([]);
const shopCarValue = ref(0);
const firstGroundArr = ref<GoodsTypes.firstGround[]>([]);
const leftActive = ref("");
const tabList = ref<GoodsTypes.firstGround[]>([]);
onMounted(async () => {
  const res: any = await queryGroupInfo({
    formid: "SAL_MATERIALGROUP",
    data: {
      FieldKeys: "FID,FPARENTID,FNAME",
      FilterString: [
        {
          Left: "(",
          FieldName: "FPARENTID",
          Compare: "=",
          Value: 0,
          Right: ")",
          Logic: "AND",
        },
      ],
      OrderString: "",
      TopRowCount: 0,
      StartRow: 0,
      Limit: 2000,
      SubSystemId: "",
      formid: "SAL_MATERIALGROUP",
    },
  });
  let arr: GoodsTypes.firstGround[] = [];
  res.forEach((item: string[]) => {
    let firstObj = {
      FID: item[0],
      FPARENTID: item[1],
      FNAME: item[2],
    };
    arr.push(firstObj);
  });
  firstGroundArr.value = arr;
  leftActive.value = arr[0].FID;
  firstClick(arr[0]);
});
const firstClick = async (item: GoodsTypes.firstGround) => {
  leftActive.value = item.FID;
  // 二级
  const res: any = await queryGroupInfo({
    formid: "SAL_MATERIALGROUP",
    data: {
      FieldKeys: "FID,FPARENTID,FNAME",
      FilterString: [
        {
          Left: "(",
          FieldName: "FPARENTID",
          Compare: "=",
          Value: item.FID,
          Right: ")",
          Logic: "AND",
        },
      ],
      OrderString: "",
      TopRowCount: 0,
      StartRow: 0,
      Limit: 2000,
      SubSystemId: "",
      formid: "SAL_MATERIALGROUP",
    },
  });
  let arr: GoodsTypes.firstGround[] = [];
  res.forEach((item: string[]) => {
    let secondObj = {
      FID: item[0],
      FPARENTID: item[1],
      FNAME: item[2],
    };
    arr.push(secondObj);
  });
  tabList.value = arr;
  tabClick(arr[0]);
};
const tabClick = async (item: GoodsTypes.firstGround) => {
  console.log(item);
  // 获取商品
  const res2: any = await queryGroupInfo({
    formid: "BD_MATERIAL",
    data: {
      FieldKeys: "FName,FNumber",
      FilterString: [
        {
          Left: "(",
          FieldName: "FMaterialGroup",
          Compare: "=",
          Value: item.FID,
          Right: ")",
          Logic: "AND",
        },
      ],
      OrderString: "",
      TopRowCount: 0,
      StartRow: 0,
      Limit: 2000,
      SubSystemId: "",
      formid: "BD_MATERIAL",
    },
  });
  const goodsInfoArr: GoodsTypes.goodsInfo[] = [];
  res2.forEach(async (j: string[]) => {
    const res = await getInfo({
      formid: "BD_SAL_PriceList",
      data: {
        FieldKeys: "FPrice",
        FilterString: [
          { FieldName: "FRowAuditStatus", Compare: "=", Value: "A", Left: "(", Right: ")", Logic: 0 },
          { FieldName: "FEntryEffectiveDate", Compare: "<=", Value: dayjs(new Date()).format("YYYY-MM-DD"), Left: "(", Right: ")", Logic: 0 },
          { FieldName: "FEntryExpiryDate", Compare: ">=", Value: dayjs(new Date()).format("YYYY-MM-DD"), Left: "(", Right: ")", Logic: 0 },
          { FieldName: "FEntryForbidStatus", Compare: "=", Value: "A", Left: "(", Right: ")", Logic: 0 },
          { FieldName: "FCustID.Fnumber", Compare: "=", Value: uni.getStorageSync("currentUser").FCompany, Left: "(", Right: ")", Logic: 0 },
          { FieldName: "FMaterialId.Fnumber", Compare: "=", Value: item.FID, Left: "(", Right: ")", Logic: 0 },
        ],
        OrderString: "",
        TopRowCount: 0,
        StartRow: 0,
        Limit: 2000,
        SubSystemId: "",
        formid: "BD_SAL_PriceList",
      },
    });
    let goodsObj = {
      FName: j[0],
      FNumber: j[1],
      price: res[0] || 0,
      count: 0,
    };
    goodsInfoArr.push(goodsObj);
  });
  setTimeout(() => {
    goodsList.value = goodsInfoArr;
  }, 500);
};
const addBuyCar = () => {};
</script>

<style lang="less" scoped>
.header {
  height: 190rpx;
  background: linear-gradient(180deg, #21cd91 0%, #27ca9e 82%, #28c9a0 100%);
  /deep/ .u-input {
    background: #fff;
    padding: 10rpx !important;
    margin-bottom: 32rpx;
  }
}
.goodsCon {
  display: flex;
  background: #fff;
  height: calc(100vh - 500rpx);
  .leftList {
    width: 200rpx;
    background: #f6f6f6;
    overflow: auto;
    font-size: 28rpx;
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80rpx;
    }
  }
  .rightList {
    width: calc(100% - 200rpx);
    overflow: auto;
    padding: 0 32rpx;
    .rightTop {
      border-bottom: 1px solid #f9f9f9;
      background: #fff;
      position: fixed;
      z-index: 99;
    }
    .item {
      padding-top: 90rpx;
    }
  }
}
.bottomBox {
  bottom: 90rpx;
  .left {
    display: flex;
    align-items: end;
    .shopCar {
      width: 96rpx;
      height: 96rpx;
      background: linear-gradient(90deg, #69e07d 0%, #2ed19a 33%, #1bbd7e 100%);
      border-radius: 50rpx;
      margin-right: 32rpx;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: -20rpx;
      .icon {
        width: 44rpx;
        height: 40rpx;
      }
      .badgeBox {
        width: 35rpx;
        height: 40rpx;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    .price {
      margin-bottom: 10rpx;
    }
  }
}
</style>
